<template>
  <div class="InterfaceConfigurebox">
    <div class="leftbox">
       <!-- 树节点过滤 -->
       <div>
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          v-model="filterText"
        >
        </el-input>
      </div>
      <!-- 树组件 -->
      <div style="margin-top: 15px;height: 95%;overflow: hidden;
        overflow-y: auto;">
        <el-tree
          ref="tree"
          :props="props"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          :load="loadNode"
          lazy>
        </el-tree>
      </div>
    </div>
    <div class="rightbox">
      <div class="neirongbox">
        <el-form :model="form" label-position="left" label-width="100px">
          <div class="shang">
            <div class="zuoyou">
              <div>企业/报告logo</div>
              <div class="img">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="httpRequest"
                  >
                    <span v-if="form.companyLogo">
                      <img  :src="'data:image/png;base64,' +form.companyLogo"  class="avatar" ref="avatar"/>
                    </span>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </div>
              <div class="text">报告样式配置</div>
              <div class="and">
                <span class="span">页眉</span>
                <el-input v-model="form.header" placeholder="请输入页眉" size="small"></el-input>
              </div>
              <div class="and">
                <span class="span">页脚</span>
                <el-input v-model="form.footer" placeholder="请输入页脚" size="small"></el-input>
              </div>
              <div class="text">公众号</div>
              <div class="gongznong">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="gongzongRequest"
                  >
                    <span v-if="form.publicQrCode">
                      <img  :src="'data:image/png;base64,' +form.publicQrCode"  class="avatar" ref="avatar"/>
                    </span>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </div>
            </div>
            <div class="zuoyou">
              <div>安全设置</div>
              <div class="img">
                <div class="and">
                  <span class="span">水印</span>
                  <el-input v-model="form.waterMark" placeholder="请输入水印名称" size="small"></el-input>
                </div>
                <div class="and">
                  <span class="span">水印模式</span>
                  <el-switch v-model="waterMarkFlag"></el-switch>
                </div>
              </div>
              <div class="text">技术服务</div>
              <div class="and">
                <span class="span">联系人</span>
                <el-input v-model="form.contact" placeholder="请输入联系人" size="small"></el-input>
              </div>
              <div class="and">
                <span class="span">联系方式</span>
                <el-input v-model="form.contactPhone" placeholder="请输入联系方式" size="small"></el-input>
              </div>
              <div class="text">小程序</div>
              <div class="gongznong">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="chengxuRequest"
                  >
                    <span v-if="form.miniProgramQrCode">
                      <img  :src="'data:image/png;base64,' +form.miniProgramQrCode"  class="avatar" ref="avatar"/>
                    </span>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </div>
            </div>
          </div>
        </el-form>
        <div class="footer">
          <el-button size="small">取消</el-button>
          <el-button type="primary" size="small" @click="submit">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { eventBus } from '@/views/system/InterfaceConfigure/event-bus';
import { gettreelist, gettreexiaji } from '@/api/userscreen'
import { getloginuserapi, getyonghuxialaapi } from '@/api/cycle'
import {
  getreportandshuiyinapi, postzenjiashuiyinapi, postaddlogoapi, postputlogoapi, postpostgongzongapi, postputgongzongapi,
  postputchengxuapi,postpostchengxuapi,postupdateshuiyinapi
} from '@/api/system/InterfaceConfigure'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      form:{},
      filterText: '',
      props: {
        label: 'bizOrgName',
        disabled: 'disabled'
      },
      treevalue: {},
      waterMarkFlag:false
    };
  },

  async mounted() {
    
  },

  methods: {
    // 保存
    async submit() {
      if (!this.treevalue.bizOrgNo) return this.$message.warning('请先选择企业')
      this.form.id?await postupdateshuiyinapi({ ...this.form, companyId: this.treevalue.bizOrgNo, waterMarkFlag: this.waterMarkFlag ? '1' : '0' }):
        await postzenjiashuiyinapi({ ...this.form, companyId: this.treevalue.bizOrgNo, waterMarkFlag: this.waterMarkFlag ? '1' : '0' })
        this.$message.success('操作成功')
      this.handleNodeClick(this.treevalue)
      eventBus.$emit('addWatermark');
    },
    // 树节点点击
    async handleNodeClick(val) {
      this.treevalue=val
      const { data: { entity } } = await getreportandshuiyinapi(val.bizOrgNo)
      if (entity) {
        this.form = { ...entity }
        this.waterMarkFlag=+entity.waterMarkFlag?true:false
      } else {
        this.form = {}
        this.waterMarkFlag=false
      }

    },
    // 上传logo
    async httpRequest(data) {
      if (!this.treevalue.bizOrgNo) return this.$message.warning('请先选择企业')
      this.form.companyLogo ? await postputlogoapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'企业logo修改')
      }) :
        await postaddlogoapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'企业logo新增')
      })
      this.handleNodeClick(this.treevalue)
    },
    // 上传小程序
    async chengxuRequest(data) {
      if (!this.treevalue.bizOrgNo) return this.$message.warning('请先选择企业')
      this.form.miniProgramQrCode ? await postputchengxuapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'小程序二维码修改')
      }) :
        await postpostchengxuapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'小程序二维码新增')
      })
      this.handleNodeClick(this.treevalue)
    },
    // 上传公众号
    async gongzongRequest(data) {
      if (!this.treevalue.bizOrgNo) return this.$message.warning('请先选择企业')
      this.form.publicQrCode ? await postputgongzongapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'公众号二维码修改')
      }) :
        await postpostgongzongapi(this.treevalue.bizOrgNo, { uploadFile: data.raw }).then(res => {
        this.setmessage(res,'公众号二维码新增')
      })
      this.handleNodeClick(this.treevalue)
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const re = await getloginuserapi()
      if (re.data.entity.orgType !== '04') {
        const res = await gettreelist()
        if (node.level === 0) {
          // 初始的级数（最顶层）
          return resolve(res.data.list) // 最顶层数据渲染为region
        }
        const ress = await gettreexiaji({ orgNo: node.data.bizOrgNo })
        if (node.level === 1) {
          return resolve(ress.data.list)
        } else if (node.level === 2) {
          return resolve([])
        }
      } else {
        if (node.level === 0) {
          const res = await getyonghuxialaapi()
          return resolve(res.data.list)
        } else {
          return resolve([])
        }
      }
    },
    setmessage(res,name){
      this.$message({
            type: res.code == '200' ? 'success' : 'warning',
            message:res.code=='200'?`${name}成功`:res.message
          })
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.bizOrgName.indexOf(value) !== -1
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  }
};
</script>

<style scoped>
.InterfaceConfigurebox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    background-color: #fff;
    padding: 20px;
    .neirongbox{
      width: 670px;
      height: 100%;
      .shang{
        display: flex;
        .zuoyou{
          width: 50%;
          height: auto;
          padding-right: 30px;
          .img{
            margin-top: 15px;
              /* width: 290px; */
            height: 110px;
            ::v-deep .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 290px;
              height: 105px;
              line-height: 105px;
              text-align: center;
            }
            ::v-deep .avatar {
              width: 290px;
              height: 105px;
              display: block;
            }
          }
          .and{
            display: flex;
            align-items: center;
            margin-top: 15px;
            .span{
              display:inline-block ;
              width: 60px;
              color: #606266;
              font-size: 14px;
               margin-right: 10px;
            }
          }
          .text{
            margin-top: 15px;
          }
          .gongznong{
            text-align: center;
            margin-top: 15px;
            ::v-deep .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 200px;
              height: 200px;
              line-height: 200px;
              text-align: center;
            }
            ::v-deep .avatar {
              width: 200px;
              height: 200px;
              display: block;
            }
          }
        }
      }
      .footer{
        text-align: center;
        margin-top: 30px;
      }
    }
  }
}
::v-deep .el-empty{
  padding: 0;
}
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed skyblue;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
::v-deep .el-divider--horizontal{
  margin:10px 0 !important;
}
::v-deep .el-input{
  /* display: inline-block; */
  width: 100%;
  flex: 1;
}
</style>